<script setup lang="ts">
import MList from "@/components/MList.vue"
import {
    NPopconfirm,NButton, NTag
    , type DataTableColumns, type DataTableRowKey
} from 'naive-ui';


import EditUserGroup from "./component/editUserGroup.vue";
import AddGroupMember from "./component/addGroupMember.vue";

import { type RowData } from 'naive-ui/es/data-table/src/interface';
import { ref, h, onMounted } from 'vue';

import { useFeature } from "~/common/mixins/";
let { DeleteOne } = useFeature()

import useTime from "~/utils/Time";
let { format } = useTime();

let showUserDrawer = ref(false);
let curUserGroup = ref()

let editUserGroupRef = ref()
let addGroupMemberRef = ref();
let listRef = ref();


let columns = ref<DataTableColumns<RowData>>([
    {
        type: 'selection'
    },
    {
        title: "用户组名称",
        key: "fdName"
    }, {
        title: "用户组描述",
        key: "fdDescription"
    }, {
        title: "用户组状态",
        key: "fdStatus",
        width: 90,
        render(rowData, _) {
            return h(NTag, {
                type: (rowData.fdStatus == 1 ? 'success' : 'error')
            }, (rowData.fdStatus == 1 ? '正常' : '错误'))
        }
    }, {
        title: "创建时间",
        key: "fdCreatedAt",
        width: 150,
        render(rowData, _) {
            return format(rowData.fdCreatedAt)
        }
    }, {
        title: '操作',
        key: "action",
        width: 240,
        render(rowData, _) {
            return [h(NButton, {
                type: "primary", style: "margin-right:10px;", dashed: true, size: 'small',
                onClick() {
                    addGroupMemberRef.value?.openDialog({ curUserGroup: rowData })
                }
            }, "添加用户"),
            h(NButton, {
                type: "warning", style: "margin-right:10px;", dashed: true, size: 'small',
                onClick() {
                    showUserDrawer.value = !showUserDrawer.value;
                    curUserGroup.value = rowData;
                }
            }, "添加权限")
                , renderDeleteIcon(rowData)]
        }
    }
]);


const renderDeleteIcon = (row: any) => {
    let id = row.fdId;

    return h(NPopconfirm, {
        onPositiveClick: () => {
            DeleteOne(userGroupStore, id).then(() => {
                message.success("删除成功");
                handleQuery()
            })
        },
        negativeText: '取消',
        positiveText: '删除'
    }, {

        trigger: () => h(NButton, {
            dashed: true, type: "error", size: 'small'
        }, "删除"),
        default: "确认要删除这行数据？"
    })
}


import { useMessage } from "naive-ui";
let message = useMessage();

import { useUserGroupStore } from "@/store/orgnization/userGroupStore";
let userGroupStore = useUserGroupStore()


let root = "usergroup";

let handleQuery = () => {
    listRef.value?.handleQuery(userGroupStore, root);
}

onMounted(() => {
    handleQuery();
})

function onShow(row: any) {
    editUserGroupRef.value?.openDialog(row)
}


let isChecked = ref(false);
let _onHandleCheck = (rowkeys: DataTableRowKey[]) => {
    isChecked.value = rowkeys.length > 0
}
</script>

<template>
    <div class="mc_1">
        <MList ref="listRef" :title="'用户组'" @on-handle-check="_onHandleCheck" @on-load="handleQuery"
            @on-show="onShow({ fdStatus: 1 })" :columns="columns">
            <template #extra_btn>
                <n-button type="error" :disabled="!isChecked">批量删除</n-button>
            </template>
        </MList>

        <EditUserGroup ref="editUserGroupRef" @handle-query="handleQuery"></EditUserGroup>
        <AddGroupMember ref="addGroupMemberRef"></AddGroupMember>

    </div>


</template>

<style scoped>
.toolbar {
    padding: 10px 0 10px 10px;

    .n-button:first-child {
        margin-right: 10px;
    }
}
</style>
